import React, { useEffect, useState } from 'react'
import { Table, Switch, Image } from 'antd' 
import { getRecListFn, updateProFlagFn } from '../../api/pro'

export default function RecommendList() {
    useEffect(()=>{
        getRecListFn().then(res=>{
            // console.log(res);
            setRecList(res.data)
        })
    },[])

    const [recList, setRecList ] = useState([])

    // 当前页
    const [current, setCurrent] = useState(1)

    const [pageNum] = useState(8)


    // 推荐状态
    const updateRecState = (checked, r) => {
        updateProFlagFn({
            proid: r.proid,
            type: 'isrecommend',
            flag: checked ? 1 : 0
        }).then(() => {
            // 刷新数据
            getRecListFn().then(res => {
                setRecList(res.data);
            });
        });
    };

    // 刷新状态
    const updateSaleState = (checked, r) => {
        updateProFlagFn({
            proid: r.proid,
            // type: 'issale',
            flag: checked ? 1 : 0
        }).then(() => {
            getRecListFn().then(res => {
                setRecList(res.data);
            });
        });
    };

    // 秒杀状态
    const updateSeckillState = (checked, r) => {
        updateProFlagFn({
            proid: r.proid,
            type: 'isseckill',
            flag: checked ? 1 : 0
        }).then(() => {
            getRecListFn().then(res => {
                setRecList(res.data);
            });
        });
    };

        const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            render:(v,r,index)=>{
                 return <span>{(current - 1) * pageNum + index + 1}</span>
            }
        },
        {
            title: '商品名称',
            dataIndex: 'proname',
            key: 'proname',
            width: 400
        },
        {
            title: '商品图片',
            dataIndex: 'img1',
            key: 'img',
            render:(v)=>{
                return <Image src={v} style={{width:100}} alt="加载失败" />
            }
        },
        {
            title: '商品分类',
            dataIndex: 'category',
            key: 'category',
        },
        {
            title: '商品价格',
            dataIndex: 'originprice',
            key: 'originprice',
            sorter: (a, b) => a.originprice - b.originprice
        },
        {
            title: '商品折扣',
            dataIndex: 'discount',
            key: 'discount',
            sorter: (a, b) => a.discount - b.discount
        },
        {
            title: '是否推荐',
            dataIndex: 'isrecommend',
            render:(v,r)=>{
                return <Switch
                   checked={v == 1}
                   onChange={checked =>{
                    updateRecState(checked,r)
                   }}
                ></Switch>
            }
        },
        {
            title: '是否售卖',
            dataIndex: 'issale',
            render:(v,r)=>{
                return <Switch
                    checked={v == 1}
                   onChange={checked =>{
                    updateSaleState(checked,r)
                   }}
                ></Switch>
            }
        },
        {
            title: '是否秒杀',
            dataIndex: 'isseckill',
            render:(v,r)=>{
                return <Switch
                   checked={v == 1}
                   onChange={checked =>{
                    updateSeckillState(checked,r)
                   }}
                ></Switch>
            }
        },
    ]

    // 过滤推荐状态为1的项
    const filteredRecList = recList.filter(item => item.isrecommend === 1);

    return (
        <div>
            <Table
                dataSource={filteredRecList}
                columns={columns}
                rowKey={'proid'}
                pagination={{
                            current,
                            pageSize:8,
                            onChange:(page)=>{
                                setCurrent(page)
                            }
                        }}  
                 locale={{
                    triggerDesc: '点击降序',
                    triggerAsc: '点击升序',
                    cancelSort: '取消排序',
                }}
            ></Table>
        </div>
    )
}
